<template>
  <div class="title-bar">
    <div class="top-bar">
      <div class="icon"></div>
      <div class="title"></div>
    </div>
    <div class="group" v-if="!loginStore.isLoggedIn">
      <div class="icon1" @click="turnLogin"></div>  
      <div class="icon2" @click="turnRegister"></div>  
    </div>
    <div class="group-active" v-else>
      <div class="icon1"></div>  
      <div class="avartar">
        <img src="https://img.js.design/assets/img/67ebefb56cfd1689b9abfccc.jpg#68477592e8bac6fd5bf74b47729833ab" alt="图片"/>
      </div>  
    </div>
  </div>
</template>

<script setup lang="ts">
import { useLoginStore } from '@/stores/login';
import { useRouter } from 'vue-router';
const router = useRouter()
const loginStore = useLoginStore()
function turnLogin(){
  router.push('/login')
}
function turnRegister(){
  router.push('/login/register')
}
</script>

<style scoped lang="less">
@import url('@/components/Title/index.css');
</style>